import { Input, Button, Avatar, Modal, Cascader, Upload } from 'antd'
import { useSelector } from 'react-redux'
import { StoreType, UserInfoType } from '../interface'
import React, { useState, useEffect } from 'react'
import { apigetClassifyList, apiSendEdit } from '../api'
import { useNavigate } from 'react-router-dom'

// 富文本编辑器
import MdEditor from 'react-markdown-editor-lite';
// 富文本解析器
import MarkdownIt from 'markdown-it';
// 富文本样式
import 'react-markdown-editor-lite/lib/index.css';

const mdParser = new MarkdownIt()


const Edit = () => {
    const [visible, setVisible] = useState(false)

    const [classifyList, setClassifyList] = useState([])

    const [CascaderValue, setCascaderValue] = useState([])

    const [title, setTitle] = useState('')

    const [infoValue, setInfoValue] = useState('')

    const [img, setImg] = useState('')

    // 保存富文本中输入的内容
    const [editContent, setEditContent] = useState({ text: '', html: '' })

    // 获取用户在redux中的用户信息
    const userInfo = useSelector((state: StoreType) => {
        return state.userInfo as UserInfoType
    })


    // 在页面初始化的时候 需要获取文章类型
    useEffect(() => {
        apigetClassifyList().then(res => {
            // 整理数据
            const changeClassify = (arr: any) => {
                return arr.map((item: any) => {
                    return {
                        ...item,
                        label: item.title,
                        value: item.towtype || item.type,
                        children: item.children && changeClassify(item.children)
                    }
                })
            }

            const arr = changeClassify(res.data)

            setClassifyList(arr)
        })
    }, [])


    const changeDialog = () => {
        // 改变弹框的显示与隐藏
        setVisible(!visible)
    }

    // 发布文章
    const send = () => {
        // 整合数据
        const data = {
            // 标题
            title,
            // 富文本的内容
            text: editContent.text,
            html: editContent.html,
            // 文章类型
            classify: CascaderValue[0],
            classifytow: CascaderValue[1],
            // 当前用户的id
            id: userInfo.id,
            info: infoValue,
            img,
            username: userInfo.name
        }

        apiSendEdit(data).then(() => {
            window.location.href = '/'
        })
    }

    // 二级菜单选择器
    const changeCascader = (data: any) => {
        // 将联级选择器 内容 保存到state中
        setCascaderValue(data)
    }

    // 保存title
    const changeTitle = (data: any) => {
        setTitle(data.target.value)
    }

    // 保存富文本中的内容
    const changeEdit = (data: any) => {
        setEditContent(data)
    }

    // 获取上传成功的图片地址
    const upLoadImg = (file:any) => {
        if(file.file.response) {
            setImg(file.file.response.data.url)
        }
    }


    return <div className="public">
        {/* 类型选择弹框 */}
        <Modal
            visible={visible}
            title="请选择文章类型"
            onOk={send}
            onCancel={changeDialog}
        >
            <Cascader
                style={{ width: "100%" }}
                options={classifyList}
                onChange={changeCascader}
                placeholder="请选择类型"
            />
            <Input value={infoValue} onChange={e => setInfoValue(e.target.value)} placeholder="请添加描述" />
            <Upload
                action="/api/editUpLoad"
                onChange={upLoadImg}
            >
                <Button>请上传封面</Button>
            </Upload>

        </Modal>
        <div className="edit-header">
            <Input style={{ width: "85%" }} placeholder="请输入标题" value={title} onChange={changeTitle} />
            <Button onClick={changeDialog}>发布文章</Button>
            <Avatar src={userInfo.img} />
        </div>
        <MdEditor
            style={{ height: "100%" }}
            renderHTML={text => mdParser.render(text)}
            onChange={changeEdit}
        ></MdEditor>
    </div>
}

export default Edit
